<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>pages/index</title>
    <style>
        .pageNum {
            padding: 3px 10px;
            margin: 0 5px;
        }

        [type="reset"] {
            visibility: hidden;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>修改用户</h1>
    <form action="" id="update">
        <label>用户id：<input type="text" name="userId"/></label>
        <label>姓名：<input type="text" name="userName"/></label>
        <label>密码：<input type="text" name="password"/></label>
        <label>余额：<input type="text" name="money"/></label>
        <button>提交</button>&nbsp;&nbsp;<button type="reset">重置</button>
    </form>

    <h1>删除用户</h1>
    <form action="" id="delete">
        <label>用户id：<input type="text" name="userId"/></label>
        <button>提交</button>&nbsp;&nbsp;<button type="reset">重置</button>
    </form>

    <h1>新增用户</h1>
    <form action="" id="post">
        <label>姓名：<input type="text" name="userName"/></label>
        <label>密码：<input type="text" name="password"/></label>
        <label>余额：<input type="text" name="money"/></label>
        <button>提交</button>&nbsp;&nbsp;<button type="reset">重置</button>
    </form>

    <h1>用户列表</h1>

    <h4>当前页：{{ pInfo.pageNum }}</h4>
    <h4>每页条数：{{ pInfo.pageSize }}</h4>
    <h4>总条数：{{ pInfo.total }}</h4>
    <h4>总页：{{ pInfo.pages }}</h4>

    <p v-for="t in pInfo.list" :key="t.userId">{{ t.userId }} -- {{ t.userName }} -- {{ t.money }}</p>

    <!-- 页码的显示 -->
    <button class="pageNum" :style="p === page ? 'font-size: 20px; color: #C00000;' : ''"
            v-for="p in pInfo.navigatepageNums" :key="p" @click="getAll(p)">{{ p }}
    </button>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                pInfo: {},
                page: 1
            }
        },
        methods: {
            getAll(page = 1) {
                this.page = page
                // 获取用户列表信息
                $.ajax({
                    url: 'ajaxUsers?page=' + this.page,
                    type: 'get',
                    success: (res) => {
                        this.pInfo = res.data
                    },
                    error: () => {
                        alert('服务器异常！！！')
                    }
                })
            },
            formSubmitMethods() {
                // 新增用户信息
                $('#post').submit(function (e) {
                    e.preventDefault();
                    const userName = $(this).find('[name="userName"]').val()
                    const password = $(this).find('[name="password"]').val()
                    const money = $(this).find('[name="money"]').val()
                    const obj = {userName: userName, password: password, money: money}

                    $.ajax({
                        url: 'users',
                        type: 'post',
                        data: obj,
                        success: (res) => {
                            setTimeout(() => {
                                alert(res.msg)
                            }, 250)
                            $(this).find('[type="reset"]').click()
                        },
                        error: () => {
                            alert('服务器异常！！！')
                        }
                    })
                })

                // 更新用户信息
                $('#update').submit(function (e) {
                    e.preventDefault();
                    const userId = $(this).find('[name="userId"]').val()
                    const userName = $(this).find('[name="userName"]').val()
                    const password = $(this).find('[name="password"]').val()
                    const money = $(this).find('[name="money"]').val()
                    const obj = {userId: userId, userName: userName, password: password, money: money}

                    $.ajax({
                        url: 'users',
                        type: 'put',
                        contentType: 'application/json;charset=utf-8',
                        data: JSON.stringify(obj),
                        success: (res) => {
                            setTimeout(() => {
                                alert(res.msg)
                            }, 250)
                            $(this).find('[type="reset"]').click()
                        },
                        error: () => {
                            alert('服务器异常！！！')
                        }
                    })
                })

                // 删除用户信息
                $('#delete').submit(function (e) {
                    e.preventDefault();
                    const userId = +$(this).find('[name="userId"]').val()

                    $.ajax({
                        url: 'users/' + userId,
                        type: 'delete',
                        success: (res) => {
                            setTimeout(() => {
                                alert(res.msg)
                            }, 250)
                            $(this).find('[type="reset"]').click()
                        },
                        error: () => {
                            alert('服务器异常！！！')
                        }
                    })
                })
            }
        },
        created() {
            this.getAll()
        },
        mounted() {
            this.formSubmitMethods()
        }
    })
</script>
</body>
</html>
